<template>
  <!--可视耳号 电子耳标 品种 性别 出生日期-->
  <el-row>
    <el-col :span="4">
      <el-form-item label="可视耳号：" :label-width="formLabelWidth">
        <el-input v-model="formInline.earNumber" placeholder="请输入" clearable/>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="电子耳标号：" :label-width="formLabelWidth">
        <el-input v-model="formInline.electronicearlabel" placeholder="请输入" clearable/>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="品种：" :label-width="formLabelWidth">
        <el-select v-model="formInline.varietiesId" placeholder="请选择" clearable>
          <el-option v-for="item in varieties" :key="item" :label="item.varietiesName" :value="item.varietiesId"/>
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="性别：" :label-width="formLabelWidth">
        <el-select v-model="formInline.gender" placeholder="请选择" clearable>
          <el-option label="公" :value="1" />
          <el-option label="母" :value="2" />
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="6">
      <el-form-item label="出生日期：" :label-width="formLabelWidth">
        <el-date-picker v-model="formInline.dateofbirth" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :size="size"/>
      </el-form-item>
    </el-col>
  </el-row>

  <!--月龄 生长阶段 位置 猪只类型 基因等级-->
  <el-row>
    <el-col :span="4">
      <el-form-item label="月龄：" :label-width="formLabelWidth">
        <el-input v-model="formInline.earNumber" placeholder="请输入" clearable/>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="生长阶段：" :label-width="formLabelWidth">
        <el-input v-model="formInline.earNumber" placeholder="请输入" clearable/>
      </el-form-item>
    </el-col>

    <el-col :span="6">
      <el-form-item label="位置：" :label-width="formLabelWidth" >
        <el-select v-model="formInline.bedroomId" placeholder="栋舍" @change="handlefield(formInline.bedroomId)" clearable style="width: 100px;">
          <el-option v-for="bedroom in bedroomList" :key="bedroom.bedroomId" :label="bedroom.bedroomName" :value="bedroom.bedroomId"/>
        </el-select>
        --
        <el-select v-model="formInline.fieldId" placeholder="栏位" clearable style="width:100px;">
          <el-option v-for="field in fieldList" :key="field.fieldId" :label="field.fieldName" :value="field.fieldId"/>
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="猪只类型：" :label-width="formLabelWidth">
        <el-select v-model="formInline.pigTypeId" placeholder="请选择" clearable>
          <el-option v-for="item in pigtype" :key="item" :label="item.pigTypeName" :value="item.pigTypeId"/>
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="5">
      <el-form-item label="基因等级：" :label-width="formLabelWidth">
        <el-select v-model="formInline.geneticlevelEnums" placeholder="请选择">
          <el-option v-for="item in geneticlevelList" :key="item" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>

  <!--生产等级 销售等级 繁殖状态 繁殖状态天数 父耳号-->
  <el-row>
    <el-col :span="4">
      <el-form-item label="生产等级：" :label-width="formLabelWidth">
        <el-select v-model="formInline.productiongrade" placeholder="请选择" clearable>
          <el-option v-for="item in productionList" :key="item" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="销售等级：" :label-width="formLabelWidth">
        <el-select v-model="formInline.saleslevel" placeholder="请选择" clearable>
          <el-option v-for="item in saleslevelList" :key="item" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="繁殖状态：" :label-width="formLabelWidth">
        <el-select v-model="formInline.reproductivestatus" placeholder="请选择" clearable>
          <el-option v-for="item in breedList" :key="item" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="繁殖状态天数：" :label-width="formLabelWidth">
        <el-input v-model="formInline.earNumber" placeholder="请输入" clearable/>
      </el-form-item>
    </el-col>

    <el-col :span="5">
      <el-form-item label="父耳号：" :label-width="formLabelWidth">
        <el-input v-model="formInline.fatherEarNumber" placeholder="请输入" clearable/>
      </el-form-item>
    </el-col>
  </el-row>

  <!--母耳号 在场状态-->
  <el-row>
    <el-col :span="4">
      <el-form-item label="母耳号：" :label-width="formLabelWidth">
        <el-input v-model="formInline.motherEarNumber" placeholder="请输入" clearable/>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="在场状态：" :label-width="formLabelWidth">
        <el-select v-model="formInline.presentstatus" placeholder="请选择" clearable>
          <el-option v-for="item in presenceList" :key="item" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item :label-width="50">
        <el-button type="danger" @click="getData">查询</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-col>
  </el-row>

  <!--新增按钮-->
  <el-row style="margin-bottom: 30px">
    <el-col>
      <el-button type="danger" @click="addPig(1, 1)">＋新增种公</el-button>
      <el-button type="danger" @click="addPig(2, 2)">＋新增种母</el-button>
      <el-button type="danger" @click="router.push('/ProgenyAdd?pigType=' + 3)">＋新增后裔</el-button>
    </el-col>
  </el-row>

  <!--列表显示-->
  <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="basicInforId" label="序号" align="center" width="80px"/>
    <el-table-column prop="earNumber" label="可视耳号" align="center" width="100px">
      <template #default="scope">
        <el-button type="primary" link @click="router.push('/PigfileDetails?basicId='+scope.row.basicInforId)">{{ scope.row.earNumber }}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="electronicearlabel" label="电子耳号" align="center" width="150px"/>
    <el-table-column prop="varietiesName" label="品种" align="center" width="100px"/>
    <el-table-column prop="gender" label="性别" align="center" width="100px">
      <template #default="scope">
        <el-text class="mx-1" v-if="scope.row.gender == true">公</el-text>
        <el-text class="mx-1" v-else>母</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="birthDate" label="出生日期" align="center" width="180px">
      <template #default="scope">
        {{ scope.row.birthDate.substr(0, 16).replace("T", " ") }}
      </template>
    </el-table-column>
    <el-table-column prop="" label="日龄" align="center" width="100px" />
    <el-table-column prop="" label="月龄" align="center" width="100px" />
    <el-table-column prop="presentstatus" label="在场状态" align="center" width="100px">
      <template #default="scope">
        <el-text v-if="scope.row.presentstatus == 1">待入场</el-text>
        <el-text v-else-if="scope.row.presentstatus == 2">在场</el-text>
        <el-text v-else-if="scope.row.presentstatus == 3">销售离场</el-text>
        <el-text v-else-if="scope.row.presentstatus == 4">死亡离场</el-text>
        <el-text v-else-if="scope.row.presentstatus == 5">淘汰离场</el-text>
        <el-text v-else-if="scope.row.presentstatus == 6">调拨离场</el-text>
        <el-text v-else>死亡未入场</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="" label="阶段" align="center" width="100px" />
    <el-table-column prop="pigTypeName" label="类型" align="center" width="100px"/>
    <el-table-column prop="bedroomName" label="栋舍" align="center" width="100px"/>
    <el-table-column prop="fieldName" label="栏位" align="center" width="100px"/>
    <el-table-column prop="reproductivestatus" label="繁殖状态" align="center" width="100px">
      <template #default="scope">
        <el-text v-if="scope.row.reproductivestatus == 1">后备空怀</el-text>
        <el-text v-else-if="scope.row.reproductivestatus == 2">返情空怀</el-text>
        <el-text v-else-if="scope.row.reproductivestatus == 3">未孕空怀</el-text>
        <el-text v-else-if="scope.row.reproductivestatus == 4">流产空怀</el-text>
        <el-text v-else-if="scope.row.reproductivestatus == 5">空胎空怀</el-text>
        <el-text v-else-if="scope.row.reproductivestatus == 6">断奶空怀</el-text>
        <el-text v-else-if="scope.row.reproductivestatus == 7">妊娠</el-text>
        <el-text v-else>哺乳</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="isPregnancyexam" label="是否妊检" align="center" width="100px">
      <template #default="scope">
        <el-text v-if="scope.row.isPregnancyexam == 0">是</el-text>
        <el-text v-else>否</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="" label="状态天数" align="center" width="100px" />
    <el-table-column prop="productiongrade" label="生产等级" align="center" width="100px">
      <template #default="scope">
        <el-text v-if="scope.row.productiongrade == 1">后备级</el-text>
        <el-text v-else-if="scope.row.productiongrade == 2">核心级</el-text>
        <el-text v-else-if="scope.row.productiongrade == 3">生产级</el-text>
        <el-text v-else>未定级</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="saleslevel" label="销售等级" align="center" width="100px">
      <template #default="scope">
        <el-text v-if="scope.row.saleslevel == 1">无</el-text>
        <el-text v-else>未定级</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="geneticlevelEnums" label="基因等级" align="center" width="100px">
      <template #default="scope">
        <el-text v-if="scope.row.geneticlevelEnums == 1">后备级</el-text>
        <el-text v-else-if="scope.row.geneticlevelEnums == 2">核心级</el-text>
        <el-text v-else-if="scope.row.geneticlevelEnums == 3">生产级</el-text>
        <el-text v-else>未定级</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="birthWeight" label="出生重量" align="center" width="100px"/>
    <el-table-column prop="" label="断奶量" align="center" width="100px" />
    <el-table-column prop="" label="断奶日期" align="center" width="100px" />
    <el-table-column prop="" label="断奶日龄" align="center" width="100px" />
    <el-table-column prop="fatherEarNumber" label="父亲耳号" align="center" width="100px">
      <template #default=""> </template>
    </el-table-column>
    <el-table-column prop="motherEarNumber" label="母亲耳号" align="center" width="100px">
      <template #default=""> </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default>
        <el-button link type="primary">查看</el-button>
        <el-button link type="primary">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
          layout="total,slot, prev, pager, next" :total="formInline.totalCount"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
          ，当前{{ formInline.pageIndex }}/{{ formInline.pageCount }}页，每页显示{{ formInline.pageSize }}条
          <el-button class="btn-prev" link @click="handleCurrentChange(1)" :disabled="formInline.pageIndex == 1">首页</el-button>
        </el-pagination>
      </td>
      <td>
        <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
          layout="slot, sizes,jumper" :total="formInline.totalCount"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button class="btn-prev" link @click="handleCurrentChange(formInline.pageCount)" :disabled="formInline.pageIndex == formInline.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

//from提示字的宽度
const formLabelWidth = "140px";

const size = ref<"default" | "large" | "small">("default");

//创建路由实例
const router = useRouter();
const route = useRoute();

//新增
const addPig = (sex: number, type: number) => {
  router.push({
    name: "MaleArchivesAdd",
    query: {
      gender: sex,
      pigType: type,
    },
  });
};

//多选
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

//当前时间
const date = new Date();

//响应式数据 获取栋舍
const condition = reactive({
  pageIndex: 1,
  pageSize: 100,
  bedroomTypeId: 0,
  bedroomName: "",
  personName: "",
});
//分页
const formInline = reactive({
  earNumber: "",
  electronicearlabel: "",
  varietiesId: 0,
  gender: 1,
  dateofbirth:'',//出生日期
  sDate: null,
  oDate: null,
  pigTypeId: 0,
  bedroomId: 0,
  fieldId:0,
  geneticlevelEnums: 1,
  presentstatus: 1,
  reproductivestatus: 1,
  productiongrade: 1,
  saleslevel: 1,
  fatherEarNumber: "",
  motherEarNumber: "",
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
});
//重置
const ruleFormRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const tableData = ref([]);
//猪只列表显示
const getData = () => {
  axios.post(apiBedinUrl+"/api/Basics/SearchPigBasic", {
      // earNumber: formInline.earNumber,
      // electronicearlabel: formInline.electronicearlabel,
      // varietiesId: formInline.varietiesId,
      // gender: formInline.gender,
      // sDate: formInline.sDate,
      // oDate: formInline.oDate,
      // pigTypeId: formInline.pigTypeId,
      // bedroomId: formInline.bedroomId,
      // fieldId: formInline.fieldId,
      // geneticlevelEnums: formInline.geneticlevelEnums,
      // presentstatus: formInline.presentstatus,
      // reproductivestatus: formInline.reproductivestatus,
      // productiongrade: formInline.productiongrade,
      // saleslevel: formInline.saleslevel,
      // fatherEarNumber: formInline.fatherEarNumber,
      // motherEarNumber: formInline.motherEarNumber,
      pageIndex: formInline.pageIndex,
      pageSize: formInline.pageSize,
    })
    .then((res) => {
      console.log("猪只列表", res.data.data);
      tableData.value = res.data.data.list;
      formInline.pageCount = res.data.data.pageCount;
      formInline.totalCount = res.data.data.totalCount;
    });
};

//分页
const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  formInline.pageIndex = val;
  getData();
};

//-------------下拉框----------------------//

//品种
const varieties = ref([]);
const getVarieties = () => {
  axios.post(apiBedinUrl+"/api/Basics/SearchVarieties", {})
    .then((res) => {
      console.log("品种", res.data.data);
      varieties.value = res.data.data;
    });
};

//猪只类型
const pigtype = ref([]);
const getPigtype = () => {
  axios.post(apiBedinUrl+"/api/Basics/SearchPigType", {})
    .then((res) => {
      console.log("猪只类型", res.data.data);
      pigtype.value = res.data.data;
    });
};

//销售等级
const saleslevelList = ref([]);
const handlesaleslevel = () => {
  axios.get(apiBedinUrl+"/api/Enums/GetSaleslevel").then((res) => {
    console.log("销售等级", res.data);
    saleslevelList.value = res.data;
  });
};

//繁殖状态
const breedList = ref([]);
const handlebreed = () => {
  axios.get(apiBedinUrl+"/api/Enums/GetReproductivestatus")
    .then((res) => {
      console.log("繁殖状态", res.data);
      breedList.value = res.data;
    });
};

//生产等级
const productionList = ref([]);
const handleproduction = () => {
  axios.get(apiBedinUrl+"/api/Enums/GetProductiongrade")
    .then((res) => {
      console.log("生产等级", res.data);
      productionList.value = res.data;
    });
};

//在场状态
const presenceList = ref([]);
const handlepresence = () => {
  axios.get(apiBedinUrl+"/api/Enums/GetPresentstatus").then((res) => {
    console.log("在场状态", res.data);
    presenceList.value = res.data;
  });
};

//基因等级
const geneticlevelList = ref([]);
const handlegeneticlevel = () => {
  axios.get(apiBedinUrl+"/api/Enums/GetGeneticlevel").then((res) => {
    console.log("基因等级", res.data);
    geneticlevelList.value = res.data;
  });
};
//获取栋舍
const bedroomList: any = ref([]);
const handleBedroom = () => {
  axios.post(apiUrl+"/api/BedRoom/ShowBedroom", {
      pageIndex: condition.pageIndex,
      pageSize: condition.pageSize,
      bedroomTypeId: condition.bedroomTypeId,
      bedroomName: condition.bedroomName,
      personName: condition.personName,
    })
    .then((res) => {
      bedroomList.value = res.data.data.list;
      console.log("获取栋舍", res.data.data.list);
    });
};

//获取栏位
const fieldList: any = ref([]);
const handlefield = (id: number, index: number) => {
  formInline.fieldId = "";
  axios.post(apiUrl+"/api/BedRoom/GetBrdroomIdField", {
      bedroomId: id,
    })
    .then((res) => {
      fieldList.value = res.data.data;
    });
};
//创建生命周期钩子
onMounted(() => {
  getVarieties(); //品种
  getPigtype(); //猪只类型
  handlesaleslevel(); //销售等级
  handlebreed(); //繁殖状态
  handleproduction(); //生产等级
  handlepresence(); //在场状态
  handlegeneticlevel(); //基因等级
  handleBedroom()//栋舍栏位
  getData();
});
</script>

<style scoped></style>
